<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="仓库编号" prop="">
      <el-input v-model="ruleForm.warehouse_Number" disabled/>
    </el-form-item>
    
    <el-form-item label="仓库名称" prop="">
      <el-input v-model="ruleForm.warehouse_Name" />
    </el-form-item>
        <el-form-item label="面积" prop="">
      <el-input v-model="ruleForm.area" />
    </el-form-item>
        <el-form-item label="地址" prop="">
      <el-input v-model="ruleForm.address" />
    </el-form-item>
        <el-form-item label="联系人" prop="">
      <el-input v-model="ruleForm.contacts" />
    </el-form-item>
    <el-form-item label="电话" prop="">
      <el-input v-model="ruleForm.phone" />
    </el-form-item>
    <el-form-item label="是否启用" prop="">
 <el-checkbox v-model="ruleForm.state" :value="true"  size="large" />
    </el-form-item>
     <el-form-item label="是否默认" prop="">
    
     <el-checkbox v-model="ruleForm.default" :value="true"   size="large" />
     
  
         
    </el-form-item>
     <el-form-item label="租赁时间" required>
        <el-form-item prop="">
          <el-date-picker
            v-model="ruleForm.rental_Time"
            type="date"
            aria-label="请选择"
            placeholder="请选择"
            style="width: 100%"
          />
        </el-form-item>
     
         </el-form-item>
        <el-form-item label="仓库类型">
      <el-select
        v-model="ruleForm.warehouse_Type"
        placeholder="请选择"
        clearable
        class="warehouse-select"
      >
        <el-option label="成品仓库一" value="成品仓库一" />
        <el-option label="成品仓库二" value="成品仓库二" />
        <el-option label="成品仓库三" value="成品仓库三" />
      </el-select>
    </el-form-item>
    <el-form-item label="部门">
      <el-select
        v-model="ruleForm.department_ID"
        placeholder="请选择"
        clearable
        class="warehouse-select"
      >
        <el-option v-for="item in deplarment" :label="item.department_Name" :value="item.id" />
       
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
         <el-button type="primary" @click="tiao()">
        取消
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>

import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { reactive,onMounted, ref } from 'vue'
import { BasicsRed } from '@/http/axiosHelper'
import { BasicsWrite } from '@/http/axiosHelper'
import { useRouter } from 'vue-router'
import { statementRed } from '@/http/axiosHelper'
const router=useRouter();

const tiao=()=>
{

    router.push({path:'/WarehouseView'})
}

// 改进版 - 添加持久化支持
const generateDateBasedNumber = (incrementLength: number = 4) => {
  const now = new Date();
  const datePart = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}`;
  
  // 从localStorage读取或初始化计数器
  const storageKey = `dateNumCounter_${datePart}`;
  let currentCount = localStorage.getItem(storageKey);
  
  // 如果localStorage中没有值，则初始化为0
  if (currentCount === null) {
    currentCount = '0';
  }
  
  // 转换为数字，递增，然后转回字符串
  const numericCount = parseInt(currentCount, 10) + 1;
  currentCount = numericCount.toString();
  
  // 保存新的计数器值
  localStorage.setItem(storageKey, currentCount);

  // 确保incrementLength是数字，然后生成递增部分
  const incrementPart = currentCount.padStart(incrementLength, '0');
  
  return datePart + incrementPart;
};


const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  "warehouse_Number":  generateDateBasedNumber(),
  "warehouse_Name": "",
  "rental_Time": "",
  "warehouse_Type": "",
  "department_ID": null,
  "state": false,
  "default": false,
  "address": "",
  "area": "",
  "contacts": "",
  "phone": ""
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  location: [
    {
      required: true,
      message: 'Please select a location',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
   BasicsWrite.post("/api/Warehouse/Createwarehouse",ruleForm).then(res=>
    {
        if(res.data.code==200)
    {
        ElMessage.success(res.data.msg);
     ruleForm.warehouse_Number= generateDateBasedNumber()
     router.push('/WarehouseView')
  ruleForm.warehouse_Name= "",
  ruleForm.rental_Time= "",
  ruleForm.warehouse_Type= "",
  ruleForm.department_ID=null,
  ruleForm.state= false,
  ruleForm.default=false,
  ruleForm.address="",
  ruleForm.area="",
  ruleForm.contacts="",
  ruleForm.phone= ""

    }
    else
    {
            ElMessage.success(res.data.msg);
    }
    }
   )
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
const page=reactive({
    PageIndex:1,
    PageSize:15,
    totalCount:0

})
onMounted(()=>
{
    delparmentdata();
})

const deplarment=ref()
const delparmentdata=()=>
{
    BasicsRed.get("basicsread/api/Deparment/GetDepartmentHandle",{params:{PageIndex:page.PageIndex,PageSize:page.PageSize}}).then(res=>
        {
            deplarment.value=res.data.data
        }
    )
}

</script>

<style scoped>
/* 下拉框宽度样式 */
.warehouse-select {
  min-width: 200px;
  width: 100%;
}

.warehouse-select :deep(.el-input__wrapper) {
  min-width: 200px;
}

.warehouse-select :deep(.el-input__inner) {
  min-width: 200px;
}
</style>
